<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"><!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
        <meta name="renderer" content="webkit"><!--国产浏览器高速模式-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
            花礼网-后台
        </title><!-- 公共样式 开始 -->
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/css/base.css">
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/css/iconfont.css">
        <script type="text/javascript" src="${pageContext.request.contextPath }/admin/framework/jquery-1.11.3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/layui/css/layui.css"><!--[if lt IE 9]>
        <script src="${pageContext.request.contextPath }/admin/framework/html5shiv.min.js"></script>
        <script src="${pageContext.request.contextPath }/admin/framework/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="${pageContext.request.contextPath }/admin/layui/layui.js"></script><!-- 滚动条插件 -->
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/css/jquery.mCustomScrollbar.css">
        <script src="${pageContext.request.contextPath }/admin/framework/jquery-ui-1.10.4.min.js"></script>
        <script src="${pageContext.request.contextPath }/admin/framework/jquery.mousewheel.min.js"></script>
        <script src="${pageContext.request.contextPath }/admin/framework/jquery.mCustomScrollbar.min.js"></script>
        <script src="${pageContext.request.contextPath }/admin/framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
        <!-- 公共样式 结束 -->
        <link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css"/>
        <script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
        <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
        <script src="${pageContext.request.contextPath }/js/DatePicker.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#datepicker").datepicker({
                    //inline:true,
                    changeMonth: true, //在日期的标题栏中是否出现下拉选择框，选择日期中的月份。true代表有选择框，false代表无选择框
                    changeYear: false, //在日期的标题栏中是否出现下拉选择框，选择日期中的年份。true代表有选择框，false代表无选择框
                    showButtonPanel: true,  //在日期面板的下方出现两个按钮，一个是今天，一个是关闭。默认值是false,不显示的
                    closeText: "关闭",  //必须结合showButtonPanel使用，并且showButtonPanel的值必须是true，否则看不到效果
                    dateFormat: "yy-mm-dd",  //表示日期显示的格式
                    defaultDate: -3,  //缺省值在当前日期中加或减几天
                    showAnim: "toggle",  //日期界面出现的动画效果
                    showWeek: true,    //显示周  当前中的第几周
                    firstDay: 1,   //默认firstDay 当前的第一天
                    yearRange: "1970:2021",   //表示下拉框中年份的范围
                    onSelect: function (selectedDate) {
                        //alert(selectedDate);
                        //获取当前对象this.id=dp minDate  //开始日期的最小值
                        //获取 option的值是minDat或者是maxDate  根据dom对象的
                        var option = this.id == "dp" ? "minDate" : "maxDate",
                            //获取当前日期的实例对象，每遍历一次就获取一次
                            instance = $(this).data("datepicker"),
                            //获取日期   instance.settings 获取日期的值
                            date = $.datepicker.parseDate(
                                instance.settings.dateFormat ||
                                $.datepicker._defaults.dateFormat,
                                selectedDate, instance.settings);
                        //设置日期
                        dates.not(this).datepicker("option", option, date);
                    }
                });
            });
        </script>
        <script type="text/javascript">
            //条件查询
            $(function () {
                //给查询按钮 添加 点击事件
                $("#search").click(function () {
                    var pubdate = $("input[name='pubdate']").val();
                    var name = $("input[name='name']").val();
                    location.href = "${pageContext.request.contextPath}/selectByNameAndPub?pubdate=" + pubdate + "&name=" + name;
                })
            })
            //删除按钮
            function deleteGoods(id) {
                location.href = "${pageContext.request.contextPath}/goodsDeleteById?id=" + id;
            }
            //修改按钮
            function updateGoods(id){
                location.href = "${pageContext.request.contextPath}/updateGoods?id=" + id;
            }
        </script>
        <style>
            .layui-table img {
                max-width: none;
            }
        </style>
    </head>
    <body>
    <div class="cBody">
        <div class="console">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="name" required="" lay-verify="required" placeholder="输入商品名称" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="datepicker" name="pubdate" placeholder="选择时间" class="layui-input"/>
                </div>
                <button class="layui-btn" lay-submit="" lay-filter="formDemo" id="search">检索</button>
            </div>
            <script>
                layui.use('form', function() {
                    var form = layui.form;

                    //监听提交
                    form.on('submit(formDemo)', function(data) {
                        layer.msg(JSON.stringify(data.field));
                        return false;
                    });
                });
            </script>
        </div>
        <table class="layui-table">
            <thead>
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>图片</th>
                <th>上架时间</th>
                <th>类型</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${goodsList}" var="goods" varStatus="i">
                <tr>
                    <td>${i.count}</td>
                    <td>${goods.name}</td>
                    <td>${goods.price}</td>
                    <td><img src="${pageContext.request.contextPath}/image/${goods.picture}" width="20" height="20" onmouseenter="imgBig(this)" onmouseleave="imgSmall(this)"/></td>
                    <td>${goods.pubdate}</td>
                    <td>${goods.typeName}</td>
                    <td>
                        <button onclick="deleteGoods('${goods.id}')" class="layui-btn layui-btn-xs">删除</button>
                        <button onclick="updateGoods('${goods.id}')" class="layui-btn layui-btn-xs">修改</button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table><!-- layUI 分页模块 -->
        <div id="pages"></div>
        <script>
            layui.use('laypage', function() {
                var laypage = layui.laypage;

                //总页数大于页码总数
                laypage.render({
                    elem: 'pages'
                    ,count: 100
                    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                    ,jump: function(obj){
//                                            console.log(obj)
                    }
                });
            });

        </script>
    </div>
    </body>
</html>